<script lang='ts' setup>
import { ref, reactive } from 'vue'
import managerServiceApi from '/@/api/org/bean/manager';

const emit = defineEmits<{
    (e: 'change', val: any): void
}>()

const props = defineProps({
    userDeptId: {
        type: String,
        default: ''
    }
})

const UserRoleListTableRef = ref();
const UserRoleTableState = reactive({
    /**查询参数 */
    queryparam: { appId: 'vms', userDeptId: props.userDeptId, filterQuery: true },

    /**
     * 表格的列配置
     */
    tableColumn: [
        { prop: "roleName", label: "角色名称", align: 'center' },
        { prop: "roleDesc", label: "描述", align: 'center' },
        { label: '是否拥有该角色', width: '120', align: 'center', slot: 'customCheckOut' },
    ],
    /**
     * 表格数据加载的方法
     */
    loadData: (params: any) => managerServiceApi.fetchRoleList(null, { ...params, ...UserRoleTableState.queryparam }),
    /**
  * 表格选中事件
  */
    handelCheckChange: (row: any, val: any) => {
        console.log('val', val)
        emit('change', { roleId: row.roleId, status: val })
    },

})

defineExpose({
    getUserRoleListTableRef: () => UserRoleListTableRef.value,
})

</script>
<template>
    <jxtech-base-table
        ref="UserRoleListTableRef"
        row-key="roleId"
        :table-column="UserRoleTableState.tableColumn"
        :load-data="UserRoleTableState.loadData"
    >
        <template #customCheckOut="{ row }">
            <el-checkbox
                v-model="row.active"
                true-label="1"
                false-label="0"
                @change="UserRoleTableState.handelCheckChange(row, $event)"
            ></el-checkbox>
        </template>
    </jxtech-base-table>
</template>
<style>
.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: var(--el-checkbox-checked-bg-color);
    border-color: var(--el-checkbox-checked-input-border-color);
}
</style>